<template>
  <view class="custom-header">
    <view class="custom-content">
      <view class="custom-header-left">
        <view class="title">{{title}}</view>
      </view>
      <view class="custom-header-right">
        <uni-icons type="search" size="28" @click="toSearch"></uni-icons>
        <uni-icons v-if="showMessage" type="chat" size="28" @click="toMessage"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "custom-header",
  props: {
    title: String,
    showMessage: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {}
  },
  methods: {
    toSearch() {
      uni.navigateTo({
        url: '/pages/search/index'
      });
    },
    toMessage() {
      uni.navigateTo({
        url: '/pages/message/index'
      });
    }
  }
}
</script>

<style scoped lang="scss">
.custom-header {
  width: 100%;
  padding-top: var(--status-bar-height);
  background-color: #ffffff;
  .custom-content {
    padding: 10rpx 20rpx;
    display: flex;
    justify-content: space-between;
	  align-content: center;
	  align-items: center;
    .custom-header-left {
      font-size: 40rpx;
    }
    .custom-header-right {
      .uni-icons {
        margin-left: 12rpx;
      }
    }
  }
}
</style>
